use std::env;

use yew::function_component;
use yew::html;
use yew::Html;
use yew::Properties;
use crate::types::Status;
use crate::components::safe_html::SafeHtml;

#[derive(Clone, PartialEq, Properties)]
pub struct Props {
    pub status: Status,
}

#[function_component]
pub fn PostComponent(props: &Props) -> Html {
    let Props { status } = props;
    html! {
        <div class="main">
            <div class="main-bar">
                <span class="main-title">
                    <p><b>{"⟳   ⌂   "}{status.url.clone()}{" ✕"}</b></p>  
                </span>
            </div>
            <div class="main-page">
                <img height="65" width="65" src={status.clone().account.avatar}/>
                <p><b>{status.clone().account.display_name}</b> {"  "} <a href={status.clone().account.url}>{status.clone().account.username}{"@"}{env!("SERVER_URL")}</a></p>
                <SafeHtml html={status.clone().content} />
                if status.media_attachments.clone().len() > 0 {
                    <a target={"_blank"} href={status.media_attachments.clone()[0].url.clone()}><img class="img" src={status.media_attachments.clone()[0].preview_url.clone()} /></a>
                }
            </div>
        </div>
    }
}
